<template>
    <div style="padding: 15px;box-sizing: border-box;"  >
        <el-button class="button" plain v-for="(i,index) in btn" @click="aBtn(i)" >{{i}}</el-button>
        <!-- <el-button class="button" plain >待确认(1000)</el-button>
        <el-button class="button" plain >已完成(1000)</el-button>
        <el-button class="button" plain >已关闭(1000)</el-button> -->
        <div style="display: flex;margin: 15px 0;">
            <!-- 日期选择器 -->

            <div class="block" style="margin-right: 20px;">
                <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" :shortcuts="shortcuts" :size="size" @change="blur" />
            </div>
            <!-- 搜索框 -->
            <div class="mt-4">
                <el-input v-model="input3" placeholder="请输入搜索内容" class="input-with-select" @blur="Sinput">
                    <template #prepend>
                        <el-select v-model="select" placeholder="订单编号" style="width: 115px">
                            <el-option label="订单编号" value="订单编号" />
                            <el-option label="入住人姓名" value="入住人姓名" />
                            <el-option label="入住人电话" value="入住人电话" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button @click="searchfn">查询</el-button>
                    </template>
                </el-input>
            </div>
        </div>
        <!-- 表格部分 -->

        <el-table :data="listDate" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="orderId" label="订单编号" width="100" />
            <el-table-column prop="checkTime" label="入住时间"/>
            <el-table-column prop="leaveTime" label="入住时间"/>
            <el-table-column prop="roomType" label="房型"/>
            <el-table-column prop="paidin" label="房号"/>
            <el-table-column prop="name" label="顾客名字"/>
            <el-table-column prop="phone" label="顾客电话"/>
            <el-table-column prop="payable" label="实付金额" width="120" />
            <el-table-column prop="state" label="订单状态" />
            <el-table-column label="操作"> 
                <template #default="scope">
                    <el-button type="primary" link @click="queren(scope.row.orderId)" v-show="a">确认入住</el-button>
                    <el-button link type="primary" size="small" @click="visit(scope.row.orderId)">查看订单</el-button>
                    <el-popconfirm title="确认删除吗"  @confirm="del(scope.row.orderId)">
                        <template #reference>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
                

            </el-table-column>
        </el-table>
        <!-- 分页部分 -->
        <div class="fenye">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup lang="ts">
import axios from '../WuJiUtils/http';
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import {useCounterStore} from '../stores/kfdd/ksdd'
let btn=['待确认','已支付','已完成','已关闭']
const aBtn=(v)=>{
    state.value=v
    render()
}
const select = ref('')
const size = ref<'default' | 'large' | 'small'>('default')
// interface _listDate {
//     number: string, time: string, msg: { name: string, phone: number }, money: number, pay: string, type: string
// }
let listDate:any = ref([])
let state=ref('')
const value2 = ref('')
const blur = (value: any) => {
    value.forEach((i,index,value) => {
        let date=new Date(i)
    let y =date.getFullYear()
    let m:string|number=date.getMonth()+1
    if(m<10){
        m='0'+m
    }
    let d:string|number=date.getDate()
    if(d<10){
        d='0'+d
    }
    i=y+'-'+m+'-'+d
    value[index]=i
    });
    
    console.log(value[0]);
    // console.log(Object.values(value)[0]);
    
    startTime.value=value[0]
    deadTime.value=value[1]
    console.log(startTime.value,deadTime.value);
    // console.log(value2.value);
    render()
    
}
let a=ref(true)
const queren = (e) => {
  ElMessageBox.confirm(
    '点击“确认入住”后，此订单将变更为已完成，之后不可再更改状态~',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  ).then(()=>{
        console.log(e);
        a.value=false
        console.log(a);
        
        
    })
    
}

const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]


const input3 = ref('')

let currentPage4 = 1
let pageSize4 = 5
let total=100
const del=(e:string)=>{
    console.log(e);

    
}

const handleSizeChange = (e:number) => {
    console.log(e);
    pageSize4=e
    render()
    
}
const handleCurrentChange = (e:number) => {
    console.log(e);
    currentPage4=e
    render()
}

const router = useRouter()
const visit = (v:string) => {
    // router.push('/home/kfvisit')
    console.log(v);
    orderId.value=v
    axios({
                url: '/orderRoom/findOrderRoomInfoByOrderId',
                method: "get",
                params: { orderId:orderId.value  }
            }).then((res)=>{
                console.log(res);
                if(res.data.code==0){
                    const store = useCounterStore()
                    store.orderRoomShipVo=res.data.data.orderRoomShipVo
                    store.orderRoomUserVo=res.data.data.orderRoomUserVo
                    store.orderRoomCostVo=res.data.data.orderRoomCostVo
                    store.orderEditorList.length=0
                    store.orderEditorList=res.data.data.orderEditorList
                    store.state=res.data.data.state
                    // store.increment(res.data.data.orderRoomShipVo)
                    router.push('/home/kfvisit')
                    console.log(store.state);
                    
                }
            })

}

function render() {
            axios({
                url: '/orderRoom/list',
                method: "post",
                data: {  page: currentPage4, limit: pageSize4,deadTime:deadTime.value,name:name.value,orderId:orderId.value,phone:phone.value,startTime:startTime.value,state:state.value }
            }).then((res) => {
                console.log(res);
                if (res.data.code == 0) {
                    // console.log(res.data.data);
                    // let $listDate=JSON.parse(JSON.stringify(listDate))
                    // $listDate=res.data.data
                    total=res.data.count
                    listDate.value=res.data.data
                    // console.log(1,listDate);
                    
                }
            })
        }
onMounted(()=>{
    render()
    // console.log(9,listDate)
})
let name =ref('')//搜索姓名
let phone=ref(0)//搜索电话号码
let orderId=ref('')//搜索订单编号
let startTime=ref('')//开始日期
let deadTime=ref('')//结束日期
const searchfn=()=>{
    if(select.value==='订单编号'){
        orderId.value=input3.value
    }else if(select.value==='入住人姓名'){
        name.value=input3.value
    }else{
        phone.value=Number(input3.value)
    }
    render()
}

// const Sinput=()=>{
//     console.log(input3);
    
// }



</script>

<style scoped lang="less">
.fenye {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}
</style>